<!-- @module app-form -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-03-19 17:24:50 -->
<template>
  <el-dialog title="微应用" :visible.sync="dialogFormVisible" width="80%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form ref="appInputForm" :model="appInputForm" :rules="formFormatRules" :label-position="labelPosition" label-width="120px" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="应用编码" prop="appCode">
            <el-input v-model="appInputForm.appCode" name="appCode" placeholder="应用编码" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="应用名称" prop="holidayType">
            <el-input v-model="appInputForm.appName" name="appName" placeholder="应用名称" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      appInputForm: {
        appId: '',
        appCode: '',
        appName: ''
      },
      formFormatRules: {
        appCode: [{
          required: true,
          message: '应用编码不能为空',
          trigger: 'blur'
        }],
        appName: [{
          required: true,
          message: '应用名称不能为空',
          trigger: 'blur'
        }]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }

      if (data && data != null) {
        this.$nextTick(function() {
          this.appInputForm = data
        })
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    onSubmit() { // 保存
      var _this = _this || this
      this.$refs.appInputForm.validate((valid) => {
        if (valid) {
          _this.dialogFormVisible = false
          _this.$emit('submitFunc', _this.appInputForm)
        } else {
          return false
        }
      })
    },
    resetFormData() {
      this.$refs.appInputForm.resetFields()
      this.appInputForm = {
        appId: '',
        appCode: '',
        appName: ''
      }
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
